スタイルシート 2

■ スタイルシート Part.2

前回は、スタイルシートについて学びました。
今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。

まずは、最もシンプルな形から。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px solid #ff6600;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

「border:」が、線のスタイルを設定するプロパティです。
「1px」は、枠の太さを表し、数字を大きくすると枠が太くなります。
「solid」は、線状の枠を指定する値です。
「#ff6600」は、枠自体の色。RGBカラーや色名で好きな色にできます。

さらに、背景に色をつけてみます

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px solid #ff6600;background-color:#ffcc99;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

「background-color:」が背景の色を設定するプロパティです。
「#ffcc99;」は、背景の色。RGBカラーや色名で好きな色にできます。

「solid」を「dashed」に変えてみます。
ちなみに、「dashed」は点線状の枠を指定する値です。

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:1px dashed #339933;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

さらに、線の太さを「3px」に
背景の色を「#ccffcc」に設定とき

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:3px dashed #339933;background-color:#ccffcc;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

「dashed」を「double」に変えてみます。
ちなみに、「double」は2重線状の枠を指定する値です
（「border:2px」以下だと2重になりません）

ということで、線の太さを「3px」にします

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border: 3px double #3300ff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>

線をさらに太く「4px」に
背景の色を「#ccccff」に設定すると
（外側の枠が太くなります）

ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" style="border:4px double #3300ff;background-color:#ccccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>